<template>
    <el-row>
        <el-col :span="24">
            <el-menu>
                <div @click="open(nav.path)" v-for="nav in navigationList">
                    <el-menu-item :index="nav.id">
                        <h3>{{ nav.title }}</h3>
                    </el-menu-item>
                </div>
            </el-menu>
        </el-col>

    </el-row>
</template>
  
<script lang="ts" setup name="Navigation">

import { reactive } from "vue";
import { nanoid } from "nanoid";
import { useRouter } from "vue-router";
const navigationList = reactive([
    { id: nanoid(), title: "props", path: '/props', },
    { id: nanoid(), title: "event", path: '/event', },
    { id: nanoid(), title: "mitt", path: '/mitt', },
    { id: nanoid(), title: "v-model", path: '/model', },
    { id: nanoid(), title: "attrs", path: '/attrs', },
    { id: nanoid(), title: "ref-parent", path: '/ref-parent', },
    { id: nanoid(), title: "provide-inject", path: '/provide-inject', },
    { id: nanoid(), title: "pinia", path: '/pinia', },
    { id: nanoid(), title: "Slot", path: '/Slot', },
    { id: nanoid(), title: "shallowRef与shallowReactive", path: '/Shallow', },
    { id: nanoid(), title: "Flex", path: '/Flex', },
])

const router = useRouter()

function open(path: string) {
    router.push({
        path: path
    })
}
</script>
<style scoped>
a {
    text-decoration: none;
    color: inherit;
}
</style>
 